<template>
  <div>
    <photo-view :list="list" @close="close" />
    <el-form :model="form">
      <el-row style="margin-bottom: 5px">
        <p class="pinformation">质控措施列表</p>
        <p class="totalStyle">共 {{ form.qcList.length }} 条数据</p>
        <el-table ref="zkcsTableRef" :data="form.qcList" border class="business">
          <el-table-column label="序号" type="index" width="70" align="center" />
          <el-table-column label="前处理" align="center" width="100">
            <template #default="scope">
              {{ getHandleName(scope.row.handleIdList) }}
            </template>
          </el-table-column>
          <el-table-column label="检测类别" align="center" width="100">
            <template #default="scope">{{ getTypeName(scope.row.jcxmList) }}</template>
          </el-table-column>
          <el-table-column label="检测项目" align="center" width="600">
            <template #default="scope"><span v-html="transformation(getjcxmNames(scope.row.jcxmList))"></span></template>
          </el-table-column>
          <el-table-column label="质控类型" align="center" width="150">
            <template #default="scope">
              <dict-tag :options="sys_qc_type" :value="scope.row.qcTypeId" />
            </template>
          </el-table-column>
          <el-table-column label="频率要求" align="center" width="150">
            <template #default="scope">
              <dict-tag :options="sys_qc_pl" :value="scope.row.plId" />
            </template>
          </el-table-column>
          <el-table-column label="每频次数量" align="center" width="150" prop="plCount" />
          <el-table-column label="数值名称" align="center" width="150" prop="valueMc" />
          <el-table-column label="数值范围" align="center" width="150" prop="valueScope" />
          <el-table-column label="偏差/误差" align="center" width="150">
            <template #default="scope">
              <dict-tag :options="sys_pw" :value="scope.row.pwId" />
            </template>
          </el-table-column>
          <el-table-column label="偏差/误差范围" align="center" width="150" prop="pwScope" />
          <el-table-column label="条件信息" align="center" width="300">
            <template #default="scope">{{ setCondition(scope.row) }}</template>
          </el-table-column>
          <el-table-column label="操作" align="center" fixed="right" width="220">
            <template #default="scope">
              <el-button link type="success" icon="View" @click="handleListView(scope.row)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-row>

      <el-row style="margin-bottom: 5px; margin-top: 5px">
        <p class="pinformation">质控措施截图</p>
        <p class="totalStyle">共 {{ form.qcFileList.length }} 条数据</p>
        <el-table class="business" :data="form.qcFileList" border ref="zkFileTableRef">
          <el-table-column label="截图编号" align="center" prop="fileCode" width="220" />
          <el-table-column label="截图名称" align="center">
            <template #default="scope">
              <span @click="list = scope.row.fileList" class="fileNameHover">{{ scope.row.fileMc }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
    </el-form>
    <el-dialog :class="'el-dialog-theme3'" append-to-body draggable :close-on-click-modal="false"
      v-model="open" :title="title" @close="closedDialog">
      <el-form label-width="130px" :model="subForm" ref="subRef">
        <el-form-item label="质控类型：" prop="qcTypeId">
          <dict-tag :options="sys_qc_type" :value="subForm.qcTypeId" v-if="subForm.qcTypeId" />
          <span v-else>/</span>
        </el-form-item>
        <el-form-item label="前处理名称：" prop="handleIdList">{{ getHandleName(subForm.handleIdList) || '/' }}</el-form-item>
        <el-form-item label="检测项目：" prop="jcxmIds">
          <span v-html="transformation(subForm.qcJclbName)"></span>
        </el-form-item>
        <el-row style="margin-bottom: 5px; margin-top: 5px">
          <p class="pinformation">检测项目列表</p>
          <p class="totalStyle">共 {{ subForm.jcxmList ? subForm.jcxmList.length : '0' }} 条数据</p>
          <el-table class="business" max-height="30vw" :data="subForm.jcxmList" border>
            <el-table-column label="检测类别" align="center" prop="jclbNames" />
            <el-table-column label="检测项目" align="center" prop="jcxmName">
              <template #default="scope">
                <span v-html="transformation(scope.row.jcxmName)"></span>
              </template>
            </el-table-column>
          </el-table>
        </el-row>
        <el-row style="margin-bottom: 5px; margin-top: 5px">
          <p class="pinformation">质控要求</p>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="频率要求：">
              <dict-tag :options="sys_qc_pl" :value="subForm.plId" v-if="subForm.plId" />
              <span v-else>/</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="每频次数量：">{{ subForm.plCount || '/' }}</el-form-item>
          </el-col>
        </el-row>
        <el-table :data="subForm.conditionList" border class="business">
          <el-table-column label="条件" align="center" width="130">
            <template #default="scope">{{ proxy.getItemByArray(andList, "andId", scope.row.c4, "andName") }}</template>
          </el-table-column>
          <el-table-column label="条件值" align="center">
            <template #default="scope">
              <el-row justify="center">
                <el-col :span="5">{{ scope.row.c1 }}</el-col>
                <el-col :span="5">{{ scope.row.c2 }}</el-col>
                <el-col :span="5">{{ scope.row.c3 }}</el-col>
              </el-row>
            </template>
          </el-table-column>
        </el-table>
        <el-row style="margin-top: 10px">
          <el-col :span="12">
            <el-form-item label="数值名称：">{{ subForm.valueMc || '/' }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="数值范围：">{{ subForm.valueScope || '/' }}</el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="偏差/误差：">
              <dict-tag :options="sys_pw" :value="subForm.pwId" v-if="subForm.pwId" />
              <span v-else>/</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="偏差/误差范围：">{{ subForm.pwScope || '/' }}</el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="danger" @click="cancal(1)">关 闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
  
<script setup>
import { gethandleList, getJcxmList } from "@/api/store/method";
import useMethodStore from "@/store/modules/method";

const methodStore = useMethodStore();
const methodId = computed(() => methodStore.methodId);
const methodQcForm = computed(() => methodStore.methodQcForm);

const { proxy } = getCurrentInstance();
const { sys_qc_pl, sys_pw, sys_qc_type } = proxy.useShareDict(
  "sys_qc_pl",
  "sys_pw",
  "sys_qc_type"
);
const title = ref("");
const open = ref(false);
const optionJcxmList = ref([]);
const qclList = ref([]);

const charact = ref([
  { characterName: "=", characterId: 0 },
  { characterName: ">", characterId: 1 },
  { characterName: "<", characterId: 2 },
  { characterName: "≥", characterId: 3 },
  { characterName: "≤", characterId: 4 }
]);

const andList = ref([
  { andName: "或", andId: 0 },
  { andName: "且", andId: 1 }
]);

const data = reactive({
  form: { qcList: [], qcFileList: [] },
  subForm: { jcxmList: [], conditionList: [], fileList: [] }
});

const { form, subForm } = toRefs(data);

watch(methodQcForm, () => {
  form.value = methodQcForm.value;
});

function handleChange() {
  let param = {
    methodId: methodId.value,
    handleIds: subForm.value.handleIdList
  };
  getJcxmList(param).then(res => {
    optionJcxmList.value = res.data;
  });
}

function getjcxmNames(row) {
  let label;
  if (row) {
    label = row.map(item => {
      return item.jcxmName;
    });
    label = label.toString();
    return label;
  } else {
    return;
  }
}

function getJcxmName(row) {
  return proxy.getItemByArrays(optionJcxmList.value, "jcxmId", row.jcxmIds, "jcxmName")
}

function getTypeName(jcxmList) {
  if (jcxmList) {
    let jclbNames = "";
    for (let item of jcxmList) {
      let tempJclbNameArray = item.jclbNames.split(",");
      for (let item1 of tempJclbNameArray) {
        if (jclbNames.indexOf(item1) == -1) {
          jclbNames += "," + item1;
        }
      }
    }
    return jclbNames.length > 0 ? jclbNames.substring(1) : jclbNames;
  } else {
    return;
  }
}

gethandleList(methodId.value).then(res => {
  qclList.value = res.data;
});

function handleListView(row) {
  open.value = true;
  title.value = "查看质控措施";
  subForm.value = row;
  handleChange();
  subForm.value.jcxmIds = row.jcxmList.map(item => {
    return item.jcxmId;
  });
  getstring();
}

function getstring() {
  subForm.value.conditionList.forEach((item, index) => {
    let itemArray = item.condition.split("φ");
    itemArray.forEach((row, subscript) => {
      let name = "c" + (subscript + 1);
      subForm.value.conditionList[index][name] = row;
    });
    if (index > 0) {
      subForm.value.conditionList[index].c4 = item.operator;
    }
  });
}

function cancal(bs) {
  if (bs == 1) {
    open.value = false;
  } else {
    fileOpen.value = false;
  }
}
function closedDialog() {
  subForm.value = { jcxmList: [], conditionList: [], fileList: [] };
  if (proxy.$refs["subFileRef"]) {
    proxy.$refs["subFileRef"].clearValidate();
  }
  if (proxy.$refs["subRef"]) {
    proxy.$refs["subRef"].clearValidate();
  }
}

function setCondition(row) {
  let viewCondition = "";
  row.conditionList.forEach(item => {
    if (!item.condition) return;
    let operatorView = item.operator;
    if (operatorView == 0) {
      operatorView = "或";
    } else if (operatorView == 1) {
      operatorView = "且";
    } else {
      operatorView = "";
    }
    var reg = new RegExp("φ", "g");
    let condition1 = item.condition.replace(reg, "");
    viewCondition = viewCondition + operatorView + condition1;
  });
  return viewCondition;
}

function transformation(row) {
  const a = proxy.getSupAndSub(row);
  return a;
}

const heightParams = ref([{ tableName: "zkcs", bottomHeight: 250 }, { tableName: "zkFile", bottomHeight: 40 }]);
function getTableHeight() {
  proxy.adaptiveHeight(proxy, heightParams.value);
}

onMounted(() => {
  nextTick(function () {
    getTableHeight();
    window.addEventListener("resize", getTableHeight);
  })
})

onUpdated(() => {
  nextTick(function () {
    getTableHeight();
  });
});
onBeforeUnmount(() => {
  window.removeEventListener("resize", getTableHeight);
});

function getHandleName(list) {
  if (list && qclList.value > 0) {
    let temp = proxy.getItemByArrays(qclList.value, "handleId", list, "handleMc").split('、')
    let find = [];
    temp.forEach((item) => {
      if (!find.find((item1) => item1 == item)) {
        find.push(item);
      }
    });
    return find.toString();
  }
}

const list = ref([])
function close() {
  list.value = []
}
</script>